<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>饼图</title>
  <script type="text/javascript" src="http://d3js.org/d3.v5.min.js"></script>
</head>

<body>
  <svg width="300" height="300" style="border:1px solid grey"></svg>
  <script>

    var marge = { top: 50, bottom: 50, left: 50, right: 50 }
    var svg = d3.select("svg");//得到SVG画布
    var width = svg.attr("width");//得到画布的宽
    var height = svg.attr("height");//得到画布的长
    var g = svg.append("g");
    // .attr("transform", "translate(" + marge.left + "," + marge.top + ")");

    var dataset = [30, 10, 43, 55, 13];//需要将这些数据变成饼状图的数据

    //设置一个color的颜色比例尺，为了让不同的扇形呈现不同的颜色
    var colorScale = d3.scaleOrdinal()
      .domain(d3.range(dataset.length))
      .range(d3.schemeCategory10);


    //新建一个弧形生成器
    var innerRadius = 30;//内半径
    var outerRadius = 100;//外半径
    var arc_generator = d3.arc()
      .innerRadius(innerRadius)
      .outerRadius(outerRadius);

    //新建一个饼状图
    var pie = d3.pie();
    //将原始数据变成可以绘制饼状图的数据，
    var pieData = pie(dataset);

    //在浏览器的控制台打印pieData
    console.log(pieData);


    var gs = g.selectAll(".g")
      .data(pieData)
      .enter()
      .append("g")
      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")//位置信息，饼图中心点位置

    //绘制饼状图的各个扇形
    gs.append("path")
      .attr("d", function (d) {
        return arc_generator(d);//往弧形生成器中注入数据
      })
      .attr("fill", function (d, i) {
        return colorScale(i);//设置颜色
      });


    //绘制饼状图上面的文字信息
    gs.append("text")
      .attr("transform", function (d) {//位置设在中心处
        return "translate(" + arc_generator.centroid(d) + ")";
      })
      .attr("text-anchor", "middle")
      .text(function (d) {
        return d.data;
      })

  </script>
</body>

</html>
